
<template>
  <div>
    <div class="header">
      <olp-header-menu></olp-header-menu>
    </div>

    <div class="news_title">
      <el-container class="layout-container-demo" style="height: 500px">
        <el-aside width="200px">
          <el-scrollbar>
            <el-menu :default-openeds="['1', '3']">
              <el-sub-menu index="1">
                <template #title>
                  <el-icon>
                    <message />
                  </el-icon>全部
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-1" @click="SelectAll">所有员工</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-sub-menu index="2">
                <template #title>
                  <el-icon><icon-menu /></el-icon>角色分类
                </template>
                <el-menu-item-group>
                  <el-menu-item index="2-1" @click="SelectByRole('系统管理员')">系统管理员</el-menu-item>
                  <el-menu-item index="2-2" @click="SelectByRole('管理员')">管理员</el-menu-item>
                  <el-menu-item index="2-3" @click="SelectByRole('员工')">员工</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-sub-menu index="3">
                <template #title>
                  <el-icon>
                    <setting />
                  </el-icon>部门分类
                </template>

                <el-menu-item-group>
                  <el-menu-item index="3-1" @click="SelectByDep('信息部')">信息部</el-menu-item>
                  <el-menu-item index="3-2" @click="SelectByDep('财务部')">财务部</el-menu-item>
                  <el-menu-item index="3-3" @click="SelectByDep('人工部')">人工部</el-menu-item>
                  <el-menu-item index="3-3" @click="SelectByDep('开发部')">开发部</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-scrollbar>
        </el-aside>

        <el-container>
          <el-header style="text-align: right; font-size: 12px">
            <div class="toolbar">
              <el-dropdown>
                <el-icon style="margin-right: 8px; margin-top: 1px">
                  <Search />
                </el-icon>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-button text @click="dialogFormVisible = true">
                      姓名查询
                    </el-button>
                    <el-dialog v-model="dialogFormVisible" style="width: 450px;" :close-on-click-modal="false">
                      <el-form :model="form">
                        <el-form-item label="查询姓名" :label-width="formLabelWidth">
                          <el-input v-model="form.name" autocomplete="off" />
                        </el-form-item>
                      </el-form>
                      <template #footer>
                        <span class="dialog-footer">
                          <el-button @click="dialogFormVisible = false">取消</el-button>
                          <el-button type="primary" @click="dialogFormVisible = false; SelectByName(form.name)">
                            搜索
                          </el-button>
                        </span>
                      </template>
                    </el-dialog>

                    <el-button text @click="dialogFormVisible2 = true">
                      工号查询
                    </el-button>
                    <el-dialog v-model="dialogFormVisible2" style="width: 450px;" :close-on-click-modal="false">
                      <el-form :model="form2">
                        <el-form-item label="查询工号" :label-width="formLabelWidth">
                          <el-input v-model="form2.name" autocomplete="off" />
                        </el-form-item>
                      </el-form>
                      <template #footer>
                        <span class="dialog-footer">
                          <el-button @click="dialogFormVisible2 = false">取消</el-button>
                          <el-button type="primary" @click="dialogFormVisible2 = false; SelectById(form2.name)">
                            搜索
                          </el-button>
                        </span>
                      </template>
                    </el-dialog>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <span>查询</span>
            </div>
          </el-header>

          <el-main>
            <el-scrollbar>
              <el-table :data="tableData">
                <el-table-column prop="staffId" label="工号" width="200" />
                <el-table-column prop="name" label="姓名" width="120" />
                <el-table-column prop="roleName" label="角色" width="120" />
                <el-table-column prop="departmentName" label="部门" width="120" />
                <el-table-column prop="authList" label="权限" />
                <el-table-column label="操作" width="300">
                  <template v-slot="scope">
                    <el-popover placement="right" :width="500" trigger="click" ref=scope.row.visible1>
                      <template #reference>
                        <el-button type="primary" round
                          @click="scope.row.visible1 = true; toauth(authid, scope.row.authList)" size="small"
                          :disabled="ifauth.altauth || scope.row.roleName == '系统管理员' || scope.row.staffId == userid">修改权限</el-button>
                      </template>
                      <el-switch v-model="authid[1]" class="ml-2" inactive-text="修改信息权限"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        @click="AltPermisson(scope.row.staffId, 2, scope.row.authList, '修改信息')"></el-switch>
                      <el-switch v-model="authid[2]" class="ml-2" inactive-text="修改公告权限"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        @click="AltPermisson(scope.row.staffId, 7, scope.row.authList, '修改公告')"></el-switch>
                      <el-switch v-model="authid[3]" class="ml-2" inactive-text="修改权限权限"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        @click="AltPermisson(scope.row.staffId, 4, scope.row.authList, '修改权限')"></el-switch>
                      <el-switch v-model="authid[4]" class="ml-2" inactive-text="修改角色权限"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        @click="AltPermisson(scope.row.staffId, 5, scope.row.authList, '修改角色')"></el-switch>
                      <el-switch v-model="authid[5]" class="ml-2" inactive-text="修改部门权限"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        @click="AltPermisson(scope.row.staffId, 6, scope.row.authList, '修改部门')"></el-switch>
                      <el-switch v-model="authid[6]" class="ml-2" inactive-text="删除公告权限"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        @click="AltPermisson(scope.row.staffId, 8, scope.row.authList, '删除公告')"></el-switch>
                      <el-switch v-model="authid[7]" class="ml-2" inactive-text="删除员工权限"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        @click="AltPermisson(scope.row.staffId, 3, scope.row.authList, '删除员工')"></el-switch>
                      <el-switch v-model="authid[8]" class="ml-2" inactive-text="新增公告权限"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        @click="AltPermisson(scope.row.staffId, 9, scope.row.authList, '新增公告')"></el-switch>
                      <el-switch v-model="authid[9]" class="ml-2" inactive-text="新增员工权限"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        @click="AltPermisson(scope.row.staffId, 1, scope.row.authList, '新增员工')"></el-switch>
                    </el-popover>

                    <el-popover placement="top" :width="200" trigger="click" slot-scope="scope" ref=scope.row.visible2>
                      <template #reference>
                        <el-button type="primary" round @click="scope.row.visible2 = true; roleform = scope.row"
                          size="small"
                          :disabled="ifauth.altrole || scope.row.roleName == '系统管理员' || scope.row.staffId == userid">修改角色</el-button>
                      </template>
                      <el-select v-model="roleform.roleName" placeholder="Select">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                          :disabled="item.disabled"
                          @click="scope.row.visible2 = false; AltRole(roleform.staffId, tablerole(roleform.roleName))" />
                      </el-select>
                    </el-popover>

                    <el-popover placement="top" :width="200" trigger="click" slot-scope="scope" ref=scope.row.visible3>
                      <template #reference>
                        <el-button type="primary" round @click="scope.row.visible3 = true; roleform = scope.row"
                          size="small" :disabled="ifauth.altdep">修改部门</el-button>
                      </template>
                      <el-select v-model="roleform.departmentName" placeholder="Select">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"
                          @click="scope.row.visible3 = false; AltDep(roleform.staffId, roleform.departmentName)" />
                      </el-select>
                    </el-popover>
                  </template>
                </el-table-column>
              </el-table>
            </el-scrollbar>
          </el-main>
        </el-container>
      </el-container>
    </div>

  </div>
</template>

<script setup>
import OlpHeaderMenu from '../components/base/OlpHeaderMenu/OlpHeaderMenu.vue'
import { ref, reactive } from 'vue'
import { Menu as IconMenu, Message, Setting, Search } from '@element-plus/icons-vue'
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import SecurityAPI from '.././api/security/index'

const dialogFormVisible = ref(false)
const dialogFormVisible2 = ref(false)
const formLabelWidth = '140px'
var result = ""

const router = useRouter()
onMounted(() => {

  if (localStorage.getItem('token') == `""` || localStorage.getItem('token') == null) {
    router.push('/')
  }

  SecurityAPI.Permisson.PermissonAPI.openAll().then(res => {
    console.log(res)
    for (var i = 0; i < res.data.length; i++) {
      tableData[i] = res.data[i];
      tableData[i].authList.sort()
    }
  })
  console.log(tableData)

  SecurityAPI.Permisson.PermissonAPI.openById(JSON.parse(localStorage.getItem('token')).staffId).then(res => {
    ifauth.altrole = !(res.data[0].authList.indexOf("修改角色") !== -1)
    ifauth.altauth = !(res.data[0].authList.indexOf("修改权限") !== -1)
    ifauth.altdep = !(res.data[0].authList.indexOf("修改部门") !== -1)
    ifauth.roleid = tablerole(res.data[0].roleName)
  })

})
const userid = JSON.parse(localStorage.getItem('token')).staffId
const ifauth = reactive({
})
const authid = reactive({
  1: "",
  2: "",
  3: "",
  4: "",
  5: "",
  6: "",
  7: "",
  8: "",
  9: "",
})

const toauth = (authid, data) => {
  authid[1] = data.indexOf("修改信息") !== -1
  authid[2] = data.indexOf("修改公告") !== -1
  authid[3] = data.indexOf("修改权限") !== -1
  authid[4] = data.indexOf("修改角色") !== -1
  authid[5] = data.indexOf("修改部门") !== -1
  authid[6] = data.indexOf("删除公告") !== -1
  authid[7] = data.indexOf("删除员工") !== -1
  authid[8] = data.indexOf("新增公告") !== -1
  authid[9] = data.indexOf("新增员工") !== -1

}
const form = reactive({
  name: '',
})
const form2 = reactive({
  name: '',
})
const tableData = reactive([])

const tablerole = (type) => {
  switch (type) {
    case '系统管理员':
      result = '1';
      break;
    case '管理员':
      result = '0'
      break;
    case '员工':
      result = '-1'
      break;
  }
  return result
}

const roleform = reactive([])

const options = [
  {
    value: '系统管理员',
    label: '系统管理员',
    disabled: true,
  },
  {
    value: '管理员',
    label: '管理员',
  },
  {
    value: '员工',
    label: '员工',
  },
]

const options2 = [
  {
    value: '信息部',
    label: '信息部',
  },
  {
    value: '财务部',
    label: '财务部',
  },
  {
    value: '人工部',
    label: '人工部',
  },
  {
    value: '开发部',
    label: '开发部',
  },
]


const SelectAll = () => {
  SecurityAPI.Permisson.PermissonAPI.openAll().then(res => {
    console.log(res)
    tableData.splice(0, tableData.length)
    for (var i = 0; i < res.data.length; i++) {
      tableData[i] = res.data[i];
      tableData[i].authList.sort()
    }
  })
}

const SelectByRole = (role) => {
  SecurityAPI.Permisson.PermissonAPI.openByRole(role).then(res => {
    console.log("通过角色查询" + role)
    console.log(res)
    tableData.splice(0, tableData.length)
    for (var i = 0; i < res.data.length; i++) {
      tableData[i] = res.data[i];
      tableData[i].authList.sort()
    }
    console.log(tableData)
  })
}

const SelectByDep = (dep) => {
  SecurityAPI.Permisson.PermissonAPI.openByDep(dep).then(res => {
    console.log("通过部门查询" + dep)
    console.log(res)
    tableData.splice(0, tableData.length)
    for (var i = 0; i < res.data.length; i++) {
      tableData[i] = res.data[i];
      tableData[i].authList.sort()
    }
  })
}

const SelectById = (id) => {
  SecurityAPI.Permisson.PermissonAPI.openById(id).then(res => {
    console.log("通过工号查询" + id)
    console.log(res)
    tableData.splice(0, tableData.length)
    for (var i = 0; i < res.data.length; i++) {
      tableData[i] = res.data[i];
      tableData[i].authList.sort()
    }
  })
}

const SelectByName = (name) => {
  SecurityAPI.Permisson.PermissonAPI.openByName(name).then(res => {
    console.log("通过姓名查询" + name)
    console.log(res)
    tableData.splice(0, tableData.length)
    for (var i = 0; i < res.data.length; i++) {
      tableData[i] = res.data[i];
      tableData[i].authList.sort()
    }
  })
}

const AltRole = (id, roleid) => {
  SecurityAPI.Permisson.PermissonAPI.altRole(id, roleid).then(res => {
    console.log("修改角色" + id + + roleid)
    console.log(res)
  })
}

const AltPermisson = (staffid, authid, authList, data) => {
  SecurityAPI.Permisson.PermissonAPI.openById(staffid).then(res => {
    console.log(res.data[0].authList)
    if (res.data[0].authList != null && res.data[0].authList != "") {
      console.log(data)
      var pan = res.data[0].authList.indexOf(data) !== -1
    } else {
      var pan = false
    }
    if (!pan) {
      SecurityAPI.Permisson.PermissonAPI.addPer(staffid, authid)
        .then(res => {
          console.log("增加权限" + staffid + authid)
          console.log(res)
        })
    } if (pan) {
      SecurityAPI.Permisson.PermissonAPI.delectPer(staffid, authid)
        .then(res => {
          console.log("删除权限" + staffid + authid)
          console.log(res)
        })
    }
  })
}

const AltDep = (id, department) => {
  SecurityAPI.Permisson.PermissonAPI.altDep(id, department).then(res => {
    console.log("修改部门" + id + department)
    console.log(res)
  })
}
</script>

<style lang="scss" scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>